<template>
    <div class="school">
        <h1>{{msg}}</h1>
        <h2>学生姓名:{{name}}</h2>
        <h2>学生性别：{{gender}}</h2>
        <h2>学生年龄：{{myAge}}</h2>
        <button @click="updateAge">尝试修改年龄</button>
    </div>
</template>

<script>
export default {
    name:"StudentInfo",
    data(){
        return{
            msg:"我是一个银行工作人员",
            myAge:this.age  //如果想修改，就要改一个名字接收
        }
    },
    methods:{
        updateAge(){
            this.myAge++
        }
    },
    // 接收到的props不允许改
    // 第一种方式：简单接收
    // props:['name','gender','age']

    // 第二种方式：接收的同时对数据进行类型限制
    /* props:{
        name:String,
        age:Number,
        gender:String
    } */

    // 第三种方式：接收的同时对数进行类型限制+默认值指定+必要性限制
    props:{
        name:{
            type:String,
            required:true //name必须
        },
        age:{
            type:Number,
            default:99 //默认值
        },
        gender:{
            type:String,
            required:true
        }
    }
}
</script>